<template>
  <div class="setup" style="width: 100%;padding: 16px 0" v-for="a in 10">
    <el-row :gutter="10">
      <el-col :span="17">
        <div style="margin-left: 18px;height: 100%">
          <div style="height: 55px;width: 100%;font-size: 18px;font-weight: 600">
            {{data.title}}
          </div>
          <div style="height: 22px;width: 100%;color: #454545;font-size: 14px;line-height: 22px">
            {{data.summary}}
          </div>
          <div style="height: 25px;width: 100%;
            /*border: 1px solid black;*/
            font-size: 18px;
            line-height: 40px;">
            <el-row>
              <el-col :span="6">
                <a href="javascript:void(0)" class="like"><el-icon><Pointer /></el-icon><span>点赞 {{data.like}}</span></a>
              </el-col>
              <el-col :span="6">
                <a href="javascript:void(0)" class="like"><el-icon><Star /></el-icon><span>收藏 {{data.collect}}</span></a>
              </el-col>
              <el-col :span="6">
                <a href="javascript:void(0)" class="like"><el-icon><ChatDotSquare /></el-icon><span>评论 {{data.comment}}</span></a>
              </el-col>
              <el-col :span="6">
                <a href="javascript:void(0)" class="like"><el-icon><View /></el-icon><span>浏览 {{data.browse}}</span></a>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div style="height: 105px;
          background-size: cover;">
          <img :src="data.imgUrl" alt="" height="105" width="174" style="padding: 0">
        </div>
      </el-col>
    </el-row>
    <router-view/>
  </div>
</template>

<script setup>
import {ref} from "vue";

const data=ref({
  title:"2024 考研报名人数 438 万，十年来首次大幅回落，如何看待这一现象？？",
  summary:"2023 年 11 月 22 日，教育部官微发文表...",
  imgUrl:"https://pic2.zhimg.com/50/v2-0aa9604c4fc97221fd7d0a958031d471_400x224.jpg",
  like:748,
  collect:74,
  comment:997,
  browse:996});
</script>

<style scoped>
.setup{
  height: 105px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;
}
.setup:hover{
  cursor: pointer;
}
p{
  padding: 0;
  margin: 0;
}
.like{
  color: #8493a5;
  text-decoration: none;
  padding-bottom: 0px;
}
.like span{
  font-size: 16px;
  padding-top: 0px;
}
.like:hover{
  color: #1989fa;
}
p{
  padding: 0;
  margin: 0;
}
</style>